<template>
	<view class="addBmzd_home" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="添加" :isAppBtn="false"></HeadCustom>
		<view class="addBmzd">
			<view class="addBmzd_box" v-for="(item, index) in addZdArr" :key="index" v-if="item.show">
				<text class="font30">{{ item.name }}</text>
				<u--input v-if="item.type == 'input'" placeholderStyle="border:none;" placeholderClass="inputPlaceholder" :maxlength="item.maxLen" :placeholder="item.tips" v-model="addBmzdObj[item.lx]" border="none"></u--input>
				<text class="flex1" v-else @tap="openSheet(item, index)">
					<text v-if="!addBmzdObj[item.lx]" class="tips-box">{{ item.tips }}</text>
					<text class="value-box" v-else>{{ addBmzdObj[item.lx] == 'true' ? '必填' : addBmzdObj[item.lx] == 'false' ? '非必填' : zdReplaceObj[addBmzdObj[item.lx]] }}</text>
				</text>
				<text class="bwfont img_right bw-arrow-right font24 color-ACB4C7"></text>
			</view>

			<view class="select_itemBox" v-if="selectXxShow">
				<view class="font30">下拉选项</view>

				<view class="select_box" v-for="(item, index) in selectXxList" :key="index">
					<u--input v-model="item.value" placeholderStyle="border:none;" placeholderClass="inputPlaceholder" class="ipt" placeholder="选项名称" border="none" clearable></u--input>
					<view class="img_box">
						<image
							v-if="selectXxList.length != 1"
							@tap="adddelXxwz('del', index)"
							src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/del14.png"
							mode="aspectFill"
						></image>
						<image @tap="adddelXxwz('add', index)" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/add15.png" mode="aspectFill"></image>
						<image @tap="swapData('down', index)" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/down16.png" mode="aspectFill"></image>
						<image @tap="swapData('up', index)" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/up17.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet
			cancelText="取消"
			@select="selectSheet"
			@close="closeSheet"
			:closeOnClickOverlay="true"
			:round="10"
			:closeOnClickAction="true"
			:actions="dataList"
			:show="show"
		></u-action-sheet>
		<BottomBtn ref="bottomBtnRef" title="确定" @btnClick="goNextPage"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			show: false,
			addBmzdObj: {},
			// 下拉选项是否展示
			selectXxShow: false,
			selectXxList: [{}],
			selectXxData: [],
			selectData: {},
			dataList: [],
			zdReplaceObj: {
				text: '文本输入',
				number: '仅限数字录入',
				single: '单选',
				multiple: '多选',
				true: '必填',
				false: '非必填',
				fill: '填空',
				select: '下拉框',
				10: '长度10字',
				20: '长度20字',
				50: '长度50字',
				100: '长度100字'
			},
			zdsxData: {
				fill: [{ name: '文本输入', value: 'text' }, { name: '仅限数字录入', value: 'number' }],
				select: [{ name: '单选', value: 'single' }, { name: '多选', value: 'multiple' }]
			},
			checkData: {
				name: '字段名称必填',
				type: '字段类型必选',
				required: '是否必填必选',
				length: '字段长度必选',
				attribute: '字段属性必选'
			},
			addZdArr: [
				{ name: '字段名称', lx: 'name', maxLen: 4, mc: '', value: '', show: true, tips: '请输入字段名称', type: 'input' },
				{
					name: '字段类型',
					lx: 'type',
					mc: '',
					value: '',
					show: true,
					tips: '请选择字段类型',
					data: [{ name: '填空', value: 'fill' }, { name: '下拉框', value: 'select' }]
				},
				{
					name: '是否必填',
					lx: 'required',
					mc: '',
					value: '',
					show: true,
					tips: '请选择是否必填',
					data: [{ name: '必填', value: 'true' }, { name: '非必填', value: 'false' }]
				},
				{ name: '字段属性', lx: 'attribute', mc: '', value: '', show: true, tips: '请选择字段属性', data: [] },
				{
					name: '字段长度',
					mc: '',
					lx: 'length',
					value: '',
					show: false,
					tips: '请选择字段长度',
					data: [{ name: '长度10字', value: '10' }, { name: '长度20字', value: '20' }, { name: '长度50字', value: '50' }, { name: '长度100字', value: '100' }]
				}
			]
		};
	},
	onLoad(option) {
		if (option.name) {
			let obj = getApp().globalData.createBwqDetail;
			this.addBmzdObj = obj.applyFields.find(x => x.name == option.name);
			this.selectData = {
				data: { lx: 'type' }
			};
			this.selectSheet({ value: this.addBmzdObj.type });
			let arr = [];
			if (this.addBmzdObj.options && this.addBmzdObj.options.length != 0) {
				this.addBmzdObj.options.forEach(item => {
					arr.push({ value: item });
				});
				this.selectXxList = arr;
			}
		}
	},
	methods: {
		// 确定添加数据
		goNextPage() {
			// options 下拉框内容
			const options = this.selectXxList.map(item => item.value);
			if (options.length != 0) {
				this.addBmzdObj.options = options;
			}
			const addArr = this.addZdArr.map(item => item.lx);

			if (this.addBmzdObj.type == 'fill') {
				// 验证字段长度
			} else {
				addArr.pop();
				// 单独验证下拉选项数据
				let flag = false;
				this.addBmzdObj.options.find(item => {
					if (!item) {
						uni.showToast({
							title: '请输入下拉选项内容',
							icon: 'none'
						});
						flag = true;
					}
				});
				if (flag) {
					return;
				}
			}
			try {
				addArr.forEach(item => {
					if (!this.addBmzdObj[item]) {
						uni.showToast({
							title: `${this.checkData[item]}`,
							icon: 'none'
						});
						throw `${item}必填`;
					}
				});
			} catch (e) {
				//TODO handle the exception
				console.log('错误', e);
				return;
			}
			const bmzdArr = getApp().globalData.createBwqDetail;
			// return
			let flag = false;
			if (bmzdArr.applyFields) {
				bmzdArr.applyFields.forEach(item => {
					if (item.name == this.addBmzdObj.name) {
						item = { ...this.addBmzdObj };
						flag = true;
					}
				});
				if (!flag) {
					bmzdArr.applyFields.push(this.addBmzdObj);
				}
			} else {
				bmzdArr.applyFields = [this.addBmzdObj];
			}
			if (this.addBmzdObj.type == 'select') {
				delete this.addBmzdObj.length;
			} else {
				delete this.addBmzdObj.options;
			}
			getApp().globalData.createBwqDetail = bmzdArr;
			uni.navigateBack({
				delta: 1 //返回层数，2则上上页
			});
		},
		// 交换位置
		swapData(type, id) {
			const length = this.selectXxList.length;
			if (type == 'down') {
				this.zIndexUp(this.selectXxList, id, length);
			} else {
				this.zIndexDown(this.selectXxList, id, length);
			}
		},
		swapArray(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		//上移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位
		zIndexUp(arr, index, length) {
			if (index + 1 != length) {
				this.swapArray(arr, index, index + 1);
			} else {
				uni.showToast({
					title: '已在最下面，无法下移',
					icon: 'none'
				});
			}
		},
		//下移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位
		zIndexDown(arr, index, length) {
			if (index != 0) {
				this.swapArray(arr, index, index - 1);
			} else {
				uni.showToast({
					title: '已在最上面，无法上移',
					icon: 'none'
				});
			}
		},
		// 增加选项文字
		adddelXxwz(type, id) {
			if (type == 'add') {
				this.selectXxList.splice(id + 1, 0, {});
			} else if (type == 'del') {
				this.selectXxList.splice(id, 1);
			}
		},
		closeSheet() {
			this.show = false;
		},
		// 选中数据
		selectSheet(data) {
			if (data.value == 'fill' || data.value == 'select') {
				this.addZdArr.forEach((item, index) => {
					if (item.name == '字段属性') {
						item.data = this.zdsxData[data.value];
						item.mc = '';
						item.value = '';
						if (data.value != this.addBmzdObj.type) {
							this.addBmzdObj.attribute = '';
							this.addBmzdObj.length = '';
						}
					}
					if (item.name == '字段长度') {
						item.show = data.value == 'fill' ? true : false;
						this.selectXxShow = data.value == 'fill' ? false : true;
						this.selectXxList = [{}];
					}
				});
			}
			this.addBmzdObj[this.selectData.data['lx']] = data.value;
		},
		openSheet(item, index) {
			if (item.lx == 'attribute' && !this.addBmzdObj.type) {
				uni.showToast({
					title: '请先选择字段类型',
					icon: 'none'
				});
				return;
			}
			this.selectData = {
				data: item,
				index: index
			};
			this.dataList = item.data;
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-input-input {
	color: var(--contentFontDarkColor);
	font-size: 28rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	height: 48rpx !important;
}
::v-deep .uni-input-placeholder {
	font-size: 28rpx;
	color: var(--contentFontFourColor) !important;
}
.addBmzd_home {
	height: 100vh;
}
.addBmzd {
	padding: 40rpx;
	.select_itemBox {
		background: var(--viewBgColor);
		border-radius: 12rpx;
		padding: 40rpx;
		margin-bottom: 15rpx;
		.select_box {
			margin: 40rpx 0;
			.ipt {
				height: 90rpx;
				width: 100%;
				padding: 10px !important;
				background-color: var(--controllerBgColor);
			}
			.img_box {
				float: right;
				margin: 20rpx 0 40rpx 0;
				> image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.addBmzd_box {
		height: 108rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		.img_right {
			height: 25rpx;
			width: 25rpx;
		}
		.tips-box{
			color: var(--contentFontFourColor);
		}
		.value-box{
			color: var(--contentFontDarkColor);
		}
		> text {
			&:first-child {
				font-weight: 400;
				color: var(--titleFontColor);
				margin-right: 40rpx;
			}
		}
	}
}
</style>
